<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<script type="text/javascript" src="<s:url value="/js/jquery/jquery.collapse.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/protocol/vendor.js"/>"></script>

<br />
<h5>LOCAL VENDOR SELECTION</h5>
<s:if test="!list.isEmpty()">

    <div id="table_content">
        <table>
            <thead>
            <tr>
                <th>Site</th>
                <th>Type</th>
                <th>Vendor Name</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tbody  id="listOfVendors">
            <s:iterator value="list" var="x">
            <tr>
                <th><s:property value="sitesForVendor"/></th>
                <th><s:property value="type.descripcion"/></th>
                <th><s:property value="name"/></th>
                <th>
                    <s:form method="POST">
                        <s:url value="/images/edit.png" id="imageEdit"/>
                        <s:hidden value="%{id}" name="localVendor.id"/>

                        <s:submit type="image" src="%{imageEdit}" cssStyle="width: 20px;height: 20px;" value="Edit"  ></s:submit>
                    </s:form>
                </th>
            </tr>
            </s:iterator>

            <tbody>
        </table>
    </div>
</s:if>


<s:form theme="simple" style="width: 100%;">
    <table id="pic_table" class="tableFilter">
        <tbody>

            <%--URLs--%>
        <s:url var="searchVendor" action="getLocalVendorByName"  namespace="/Directories/CentralVendor"/>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td><label>Category</label></td>
            <td>
                <select disabled="disabled">
                    <option value="Local">Local</option>
                </select>

            </td>
        </tr>

        <tr>
            <td>
                <label>Type</label>
            </td>
            <td>
                <s:select name="localVendor.type.id" value="%{localVendor.type.id}"
                          headerKey="" headerValue="Choose a type"
                          list="vendorTypes"
                          listKey="id"
                          listValue="descripcion"
                          theme="simple"
                        >
                </s:select>
            </td>
        </tr>

        <tr>
            <td>
                <label>Vendor Name</label>
            </td>
            <td>
                <!--It Sends SITE's ID to Server-->
                <s:textfield theme="simple"
                             name="localVendor.id"
                             id="vendorId" readonly="true" cssClass="load_hidden"/>

                <!--search field for SITES-->
                <s:textfield theme="simple" id="searchVendor" name="localVendor.name" value="%{localVendor.name}"/>
                <s:a href="#" onclick="searchVendors(
                    $('#searchVendor').val(),$('#main_localVendor_type_id').val(),'%{searchVendor}');"
                     theme="simple" >
                    <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>

                <label id="labelRequiredVendor" style="color: red">*</label>

            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td>
                <label>Sites</label>
            </td>
            <td>
                <s:select label="Sites" name="chosenSites" id="sites" multiple="true"
                          headerKey="-1" headerValue="Choose a site"
                          list="centros"
                          listKey="id"
                          listValue="institucion"
                          value="%{chosenSites}"/>
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td>
                <label>Primary Contact Person Name</label>
            </td>
            <td>
                <s:textfield name="localVendor.contactPerson.name" value="%{localVendor.contactPerson.name}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Primary Contact Person Email</label>
            </td>
            <td>
                <s:textfield name="localVendor.contactPerson.email" value="%{localVendor.contactPerson.email}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Primary Contact Person Phone</label>
            </td>
            <td>
                <s:textfield name="localVendor.contactPerson.phone" value="%{localVendor.contactPerson.phone}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Primary Contact Person Fax</label>
            </td>
            <td>
                <s:textfield name="localVendor.contactPerson.fax" value="%{localVendor.contactPerson.fax}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td>
                <label>Secondary Contact Person Name</label>
            </td>
            <td>
                <s:textfield name="localVendor.secondaryContactPerson.name" value="%{localVendor.secondaryContactPerson.name}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Secondary Contact Person Email</label>
            </td>
            <td>
                <s:textfield name="localVendor.secondaryContactPerson.email" value="%{localVendor.secondaryContactPerson.email}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Secondary Contact Person Phone</label>
            </td>
            <td>
                <s:textfield name="localVendor.secondaryContactPerson.phone" value="%{localVendor.secondaryContactPerson.phone}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td>
                <label>Secondary Contact Person Fax</label>
            </td>
            <td>
                <s:textfield name="localVendor.secondaryContactPerson.fax" value="%{localVendor.secondaryContactPerson.fax}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        </tbody>

        <tbody>
        <tr>
            <td style="text-align: right;">
                <s:submit value="Save" action="save" theme="simple" onclick="return validate()"/>
            </td>
            <td>
                <s:submit value="Clear" action="main" onclick="$('#vendorId').val('');" theme="simple"/>
            </td>
        </tr>
        </tbody>

    </table>
</s:form>
<script type="text/javascript">
    selectItemMenu("locallVendorSelection");

    function editExistentVendor(vendorId){
        var vendors = $('#listOfVendors').children();
        for( var i = 0; i < vendors.length; i++){
            var tr = vendors[i];
            var th = $(tr).children()[3];
            var form = $(th).children()[0];
            var form_input = $($(form).children()[0]).children()[0];
            if($(form_input).val() == vendorId){
                form.submit();
                break;
            }
        }
    }

    /*muestra collapses para la edicion*/
    function init(){
        $('#labelRequiredVendor').hide();
        if(!$.isEmptyObject($('#main_id_investigadorid').val())){
            loadSite();
        }
    }

    window.onload=init;

</script>